<template>
  <!--列表-->
  <router-exact-view name="topimg">
    <div class="container">
      <div style="margin-bottom: 20px; font-weight: bold;">效果预览</div>
      <el-carousel ref="img-carousel" :autoplay="false" :interval="5000" trigger="click" height="500px" @change="whenChange">
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <img v-if="item.image" :src="item.image" alt="">
        </el-carousel-item>
      </el-carousel>
      <div style="margin: 10px 0; text-align: center;">{{ name }}</div>
      <div style="margin: 10px 0; font-weight: bold;">编辑图片</div>
      <div class="img-form">
        <div v-for="(item, index) in imgList" :key="item.key" class="img-form-item">
          <div style="overflow: auto;">
            <span style="float: left; line-height: 32px;">图片{{ index + 1 }}:</span>
            <el-button type="primary" style="float: right; margin-left: 10px;" @click="deleteImg(index)">删除图片</el-button>
            <el-button v-if="index !== imgList.length - 1" type="primary" style="float: right;" @click="downImg(index)">下移</el-button>
            <el-button v-if="index !== 0" type="primary" style="float: right;" @click="upperImg(index)">上移</el-button>
          </div>
          <el-input v-model="imgList[index].image" placeholder="请输入图片链接" style="margin-top: 10px;" />
          <el-input v-model="imgList[index].name" placeholder="请输入图片标题" style="margin: 10px 0;" />
        </div>
        <el-button type="primary" style="margin-bottom: 20px;" @click="addImg">新增图片</el-button>
      </div>
    </div>
    <el-button type="primary" style="margin-top: 20px; margin-left: 15px;" @click="save">保存配置</el-button>
  </router-exact-view>
</template>

<script>
import RouterExactView from '@/components/routerExactView'
import { getImgList, saveImg } from '@/api/operate'

export default {
  components: { RouterExactView },
  data() {
    return {
      name: '',
      imgList: []
    }
  },
  watch: {
    imgList: {
      handler(val) {
        console.log('监听imgList', val)
        this.name = val[0] ? val[0].name : ''
      },
      deep: true
    }
  },
  mounted() {
    if (this.$route.name === 'topimg') {
      console.log('加载页面')
      this.getList()
    }
  },
  methods: {
    async getList() {
      try {
        const res = await getImgList()
        if (res) {
          this.imgList = res
          this.name = res[0] ? res[0].name : ''
        }
      } catch (err) {
        console.log('接口出错')
      }
    },
    async save() {
      try {
        const res = await saveImg(this.imgList)
        if (res && typeof res === 'boolean') {
          this.$message.success('图片配置保存成功')
        }
        debugger
      } catch (err) {
        console.log('接口出错')
      }
    },
    addImg() {
      this.imgList.push({
        image: '',
        name: ''
      })
    },
    deleteImg(index) {
      this.imgList.splice(index, 1)
    },
    upperImg(index) {
      const list = JSON.parse(JSON.stringify(this.imgList))
      list[index] = list.splice(index - 1, 1, list[index])[0]
      this.imgList = list
    },
    downImg(index) {
      const list = JSON.parse(JSON.stringify(this.imgList))
      list[index] = list.splice(index + 1, 1, list[index])[0]
      this.imgList = list
    },
    whenChange(index) {
      this.imgList = JSON.parse(JSON.stringify(this.imgList))
      this.$nextTick(() => {
        this.name = this.imgList[index].name
      })
    }
  }
}
</script>
<style scoped>
@import "../../common.css";
.container {
  background: #fff;
  padding: 16px;
}
.el-carousel__item {
  height: 500px;
}
.el-carousel__item img {
  width: 100%;
  height: 500px;
  object-fit: contain;
}
</style>
